<template>
  <div class="home-container">

    <div class="header-container">
      <div class="banner">
  			<div>
  	      <div class="banner-title">
  	        <span class="light">北京博济</span>
  	      </div>
  	      <div class="banner-title">
  	        <span class="light">健康体检&nbsp;</span><span class="dark">管理中心</span>
  	      </div>
  			</div>
        <img src="./logo.png" class="image"  height="80">
      </div>

      <div class="menu">
        <router-link tag="div" class="to-health-list" to="/healthList">
          <span class="menu-text">体检列表</span>
          <img src="./list.png" width="70" height="70">
        </router-link>
        <div class="menu-column">
          <router-link tag="div" class="to-expert" to="/news">
            <span class="menu-text">新闻资讯</span>
            <img src="./expert.png" width="60" height="60">
          </router-link>
          <router-link tag="div" class="to-user" to="/user">
            <span class="menu-text">个人中心</span>
            <img src="./user.png" width="60" height="60">
          </router-link>
        </div>
      </div>
    </div>

    <div class="center box" @click="toCenterDetail">
      <div class="box-title-container">
        <div class="box-title"><i class="icon icon-qiye"></i>中心介绍</div>
        <div class="box-more"></div>
      </div>
      <div class="center-detail-container">
        <img :src="centerDetail.thumb" width="100%">
        <div class="center-name">{{centerDetail.name}}</div>
        <div class="center-detail">{{centerDetail.synopsis}}</div>
      </div>
    </div>

    <div class="news box">
      <div class="box-title-container">
        <div class="box-title"><i class="icon icon-xinwengonggao"></i>新闻咨询</div>
        <router-link tag="div" class="box-more" to="/news">
          更多
        </router-link>
      </div>
      <div class="news-list">
        <div class="news-item" v-for="item in newsList" :key="item.id"  @click="toNewsDetail(item.id)">
          <img :src="item.thumb" width="80" height="60">
          <div class="news-title">{{item.title}}</div>
          <div class="news-time">{{item.addtime}}</div>
        </div>
      </div>
    </div>

    <div class="expert box">
      <div class="box-title-container">
        <div class="box-title"><i class="icon icon-duoren"></i>专家介绍</div>
        <!-- <router-link tag="div" class="box-more" to="/expert">
          更多
        </router-link> -->
      </div>
      <div v-if="expertList.length">
        <slider>
          <div class="expert-detail-container" v-for="item in expertList" :key="item.id">
            <img :src="item.photo" class="expert-avatar" width="70" height="70">
            <div class="expert-name-container">
              <span class="expert-name">{{item.personName}}</span>
              <span class="expert-major">{{item.professional}}</span>
            </div>
            <div class="expert-detail">{{item.introduction}}</div>
          </div>
        </slider>
      </div>
      <!-- 留点空间给dots -->
      <div style="height: 15px"/>

    </div>

    <div class="address box">
      <div class="box-title-container">
        <div class="box-title"><i class="icon icon-diliweizhi"></i>{{ centerDetail.address }}</div>
        <div class="box-more">
          <a :href="'tel:' + centerDetail.telephone">
            <i class="icon-dianhua"></i>
            <span>电话</span>
          </a>
        </div>
      </div>
      <baidu-map class="address-map" :center="location.center" :zoom="location.zoom" v-show="location.center.lng">
        <bm-marker :position="location.center">
          <bm-label :content="centerDetail.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>
      </baidu-map>
    </div>

    <div style="height: 44px"/>
    <router-view></router-view>
  </div>
</template>

<script>
import Slider from 'base/slider/slider'
import {getExpertList, getNewsList, getCenterDetail} from 'api/main'

export default {
  data () {
    return {
      expertList: [],
      newsList: [],
      centerDetail: {},
      location: {
        center: {
          lng: Number,
          lat: Number
        },
        zoom: 15
      }
    }
  },
  components: {
    Slider: Slider
  },
  created() {
    this._getExpertList()
    this._getNewsList()
    this._getCenterDetail()
  },
  mounted() {
  },
  methods: {
    toNewsDetail(id) {
      this.$router.push({
        path: `/home/${id}`
      })
    },
    toCenterDetail() {
      this.$router.push({
        path: '/home/centerDetail'
      })
    },
    _getExpertList() {
      getExpertList().then((res) => {
        console.log(res)
        this.expertList = res
      })
    },
    _getNewsList() {
      getNewsList().then((res) => {
        console.log("res: ", res)
        this.newsList = res
        this.newsList = this.newsList.slice(0, 3)
        console.log("res-slice: ", res)
      })
    },
    _getCenterDetail() {
      getCenterDetail().then((res) => {
        this.centerDetail = res
        console.log(this.centerDetail)
        this.location.center.lng = this.centerDetail.longitude
        this.location.center.lat = this.centerDetail.latitude
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped scoped lang="stylus" rel="stylesheet/stylus">
  @import "home.styl"
</style>
